<template>
  <div class="announcement-list page">
    <div class="nav-bar">
      <van-nav-bar class="bg_white" title="公告" />
    </div>
    <div class="content" ref="webview">
      <div class="nodata" style="max-height:300px" v-if="dataList.length===0">暂无数据</div>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-if="dataList.length> 0">
        <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>7?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false" v-if="dataList.length>0">
          <template v-for="(item,index) in dataList">
            <div class="list" @click="goDetails(item.id)" :key="index">
              <div class="title">{{item.title}}</div>
              <div class="time">{{item.update_time}}</div>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
    <tab-bar v-model="isActive"></tab-bar>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'announcementList',
  data () {
    return {
      isActive: 3,
      apiUrl: 'getNoticeList'
    };
  },
  mixins: [mixins],
  created () {
    this.getList('getNoticeList', true);
  },
  methods: {
    goDetails (id) {
      this.$router.push({ 'path': '/announcement/details', query: { id: id } });
    }
  }
};
</script>
<style lang="less" scoped>
.announcement-list {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .hd-bar {
    height: 220px;
    color: #fff;
    font-size: 44px;
    padding: 0 43px;
    display: flex;
    align-items: center;
    background: rgba(145, 126, 255, 1);
    box-shadow: 0px -14px 17px 1px rgba(145, 126, 255, 0.36);
    background-image: url('/static/images/icon-announcement-bg.png');
    background-position: 454px bottom;
    background-repeat: no-repeat;
    background-size: 252px 177px;
    .title {
      margin-top: 60px;
    }
  }
  .content {
    box-sizing: border-box;
    flex: 1;
    overflow: auto;
    border-top: 1px solid #eee; /*no*/
    // background-color: #fff;
    .list {
      padding: 21px 0 21px 0;
      margin: 0 25px;
      border-bottom: 2px solid #eee;
      position: relative;
      &::before {
        content: '';
        display: block;
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -12px;
        width: 14px;
        height: 24px;
        background-image: url('/static/images/icon-arrow-right.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 14px 24px;
      }
      .title {
        font-size: 28px;
        color: #353535;
      }
      .time {
        color: #999;
        font-size: 24px;
        margin-top: 10px;
      }
    }
    .list.active {
      &::before {
        background-color: #917eff;
      }
    }
  }
}
</style>
